<!--
 * @Author: zhangyang
 * @Date: 2022-03-03 17:26:52
 * @LastEditTime: 2022-08-27 16:35:12
 * @Description: 标签页管理
-->
<script lang="ts" setup>
import type { ContextMenuItem } from '@/components/YoungContextMenu';
import { useTagsStore } from '@/stores';
import type { RouteLocationNormalized } from 'vue-router';
const state = useTagsStore();
const { visitedViews } = storeToRefs(state);
const { delView, delCachedView, delOtherViews, delAllViews, addToCache } = state;

const route = useRoute();
const router = useRouter();
const isCurrentTag = (tag: RouteLocationNormalized) => route.path === tag.path;

const scrollBar = ref<HTMLElement>();

const toLastView = () => {
  const lastView = visitedViews.value.slice(-1)[0];
  if (lastView) {
    router.push(lastView.fullPath);
  } else {
    router.push('/');
  }
};
// 移动到当前标签
const moveToCurrentTag = (path: string) => {
  const dom = document.querySelector('#scroll-container');
  
  const children = dom?.children ?? [];
  const index = Array.from(children).findIndex((item: any) => item.pathname === path) || 0;
  if (index === 0) {
    scrollBar.value?.scrollTo({ left: 0 });
  } else {
    let len = 0;
    for (const el of Array.from(children).slice(0, index)) {
      len += el.clientWidth;
    }
    scrollBar.value?.scrollTo({ left: len });
  }
};

// 滚动鼠标滚轮
const scrollHandler = (e: WheelEvent) => {
  const offset = e.deltaY * 10;
  // @ts-ignore
  const left = scrollBar.value.scrollbarInstRef.containerRef.scrollLeft;
  scrollBar.value?.scrollTo({ left: left + offset });
};
const closePage = (tag = route) => {
  if (delView(tag) && isCurrentTag(tag)) {
    toLastView();
  }
};
const showContextMenu = ref(false);
const menuList = reactive<ContextMenuItem[]>([
  {
    title: '刷新',
    handler: () => {
      delCachedView(route);
      menuList.shift();
    }
  },
  {
    title: '关闭',
    handler: closePage
  },
  {
    title: '关闭其他',
    handler: () => delOtherViews(route)
  },
  {
    title: '关闭全部',
    handler: () => {
      delAllViews();
      toLastView();
    }
  }
]);
const openMenu = (tag: RouteLocationNormalized) => {
  if (visitedViews.value.length > 1 && route.path === tag.path) {
    if (route.meta.affix && menuList.length === 4) {
      menuList.shift();
    }
    showContextMenu.value = true;
  }
};

watch(() => route.path, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    moveToCurrentTag(newVal);
    addToCache(route);
    if (menuList.length === 3) {
      menuList.unshift({
        title: '刷新',
        handler: () => {
          delCachedView(route);
          menuList.shift();
        }
      });
    }
  }
});
</script>
<template>
  <NScrollbar ref="scrollBar" x-scrollable>
    <div id="scroll-container" class="flex relative" @wheel.prevent="scrollHandler">
      <n-tag
        v-for="(tag, index) in visitedViews"
        :key="String(tag.name) + 'fadsrhewioru'"
        class="inline-block mx-1 my-0.2vh hover:cursor-pointer"
        :type="isCurrentTag(tag) ? 'success' : undefined"
        :closable="!tag.meta.affix && visitedViews.length > 1"
        @click="router.push(tag.fullPath)"
        @close.stop="closePage(tag)"
        @contextmenu.prevent="openMenu(tag)"
      >
        {{ tag.meta.title }}
      </n-tag>
      <YoungContextMenu
        v-model="showContextMenu"
        :menu-list="menuList"
      />
    </div>
  </NScrollbar>
</template>
